<template>
  <div>
    <el-row :gutter="30">
      <el-col :span="6">
        <div>
          <!--          使用el-skeleton骨架屏来过渡加载数据的动画-->
          <el-skeleton style="width: 240px" :loading="loading" animated>
            <template #template>
              <el-skeleton-item variant="circle" style="width: 200px; height: 200px"/>
            </template>
            <template #default>
              <el-avatar :src="$imgBaseUrl+personInfo.avatar" :size="200" class="av"/>
              <el-upload
                  name="files"
                  :action="$upFile"
                  :headers="header"
                  :data="fileInfoVo"
                  :on-success="upAvatar"
                  v-if="EditShow"
              >
                <el-button type="primary" style="margin-left: 40px">点击上传</el-button>
              </el-upload>
            </template>
          </el-skeleton>
        </div>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <div>
                <span class="active_class">资料卡片</span>
              </div>
              <el-button class="button" text :icon="Edit" @click="modify">编辑</el-button>
            </div>
          </template>
          <div>
            <el-descriptions title="个人信息" size="large">
              <el-descriptions-item label="用户名">
                <el-text type="primary" size="large">{{ personInfo.userName }}</el-text>
              </el-descriptions-item>
              <el-descriptions-item label="昵称">
                {{ personInfo.nickname }}
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                {{ personInfo.genderInfo }}
              </el-descriptions-item>
              <el-descriptions-item label="角色">
                <el-tag class="ml-2" type="success" v-for="(item,index) in personInfo.rolesInfo" :key="index">
                  {{ item.roleName }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                {{ personInfo.phone }}
              </el-descriptions-item>
              <el-descriptions-item label="邮箱">
                {{ personInfo.email }}
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import {ElMessage} from 'element-plus'
import {getMyInfo, updateAdminUser} from '@/api/home/user'
import {onMounted, ref, watch} from "vue";
import {Edit} from '@element-plus/icons-vue'
import {getToken} from "@/util/token/tokenUtil";
import {getUserEarnings} from "@/api/home/order/order";

/*数据封装*/
let loading = ref(true)
let EditShow = ref(false)
let personInfo = ref({})
let fileInfoVo = ref({
  bucketName: 'user',
  folderName: 'avatar',
  fileName: '',
  filePath: ''
})
const header = {
  token: getToken('token')
}

function upAvatar(res) {
  let adminUser = {
    avatar: res.data
  }
  updateAdminUser(adminUser)
}

function sendMyInfo() {
  try {
    /*获取登陆人信息*/
    getMyInfo().then(res => {
      personInfo.value = res.data
    })
    /*获取头像*/
    loading.value = false
  } catch (error) {
    ElMessage.error(error)
  }
}

function modify() {
  EditShow.value = true
}

onMounted(() => {
  /*初始化数据*/
  sendMyInfo()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}


/*-------------------------------------------------*/
.personInfo_box {
  display: flex;
  justify-content: space-between;
  height: 100vh;
  background: #0658db;
}

.person_class {
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.active_class {
  color: red;
}

.av{
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s, height 2s, transform 2s;
}
.av:hover {
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  transform: rotate(180deg);
}
</style>
